<template>
  <view class="tui-upload-box">
    <view class="tui-upload-item tui-upload-add" @tap="add">
      <text>+</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "tuiUploadAdd",
  data() {
    return {};
  },
  methods: {
    add() {
      this.$emit("add");
    }
  }
};
</script>

<style>
.tui-upload-box {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
}

.tui-upload-item {
  width: 153rpx;
  height: 153rpx;
  border: 1rpx solid #e6e6e6;
  box-sizing: border-box;
  border-radius: 4rpx;
  position: relative;
  /* margin-bottom: 36rpx;
  margin-right: 26rpx; */
  background-color: rgba(150, 150, 150, 0.5);
}

.tui-upload-add {
  height: 80%;
}

.tui-upload-item:nth-of-type(4n) {
  margin-right: 0 !important;
}

.tui-upload-img {
  width: 153rpx;
  height: 153rpx;
  border-radius: 4rpx;
}

.tui-upload-del {
  position: absolute;
  /* font-size: 24px !important; */
  right: -18rpx;
  top: -18rpx;
  /* color: #ed3f14 !important; */
}

.tui-upload-add {
  color: #e6e6e6;
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-upload-add text {
  font-size: 84rpx;
  line-height: 38rpx;
  height: 48rpx;
}
</style>